<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="连接参数" name="connect">
        <el-form
          v-if="activeTab === 'connect'"
          v-hasPermi="['monitor:config:query']"
          ref="connectRef"
          :model="connectForm"
          :rules="connectRules"
          label-width="140px"
          label-position="right"
        >
          <el-form-item label="主机地址" prop="host">
            <el-input
              v-model="connectForm.host"
              maxlength="20"
              clearable
              placeholder="例：127.0.0.1"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="connectForm.username"
              maxlength="20"
              clearable
              placeholder="请输入用户名"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="connectForm.password"
              maxlength="20"
              text="password"
              show-password
              clearable
              placeholder="请输入用户密码"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="客户端ID" prop="clientId">
            <el-input
              v-model="connectForm.clientId"
              maxlength="20"
              clearable
              placeholder="请输入客户端ID"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="客户端密钥" prop="clientSecret">
            <el-input
              v-model="connectForm.clientSecret"
              maxlength="100"
              clearable
              placeholder="例：xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="https端口" prop="https">
            <el-input
              v-model="connectForm.https"
              maxlength="20"
              clearable
              placeholder="例：443"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="http端口" prop="http">
            <el-input
              v-model="connectForm.http"
              maxlength="20"
              clearable
              placeholder="例：83"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item prop="enableHttpTest">
            <span slot="label">
              开启http调试
              <el-tooltip
                effect="dark"
                content="开启后，将使用http端口调试，https端口不可用"
                placement="top"
              >
                <i class="el-icon-info" />
              </el-tooltip>
            </span>
            <el-switch
              v-model="connectForm.enableHttpTest"
              active-color="#13ce66"
              inactive-color="#c0ccda"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              v-hasPermi="['monitor:config:edit']"
              type="primary"
              size="mini"
              @click="onSubmit('connectRef')"
            >
              保 存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="查询参数" name="query">
        <el-form
          v-if="activeTab === 'query'"
          v-hasPermi="['monitor:parameter:query']"
          ref="queryRef"
          :model="queryForm"
          :rules="queryRules"
          label-width="140px"
          label-position="right"
        >
          <el-form-item label="设备所属组织编码" prop="ownerCode">
            <el-input
              v-model="queryForm.ownerCode"
              maxlength="20"
              clearable
              placeholder="请输入设备所属组织编码"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="设备大类" prop="deviceCategory">
            <el-input
              v-model="queryForm.deviceCategory"
              maxlength="20"
              clearable
              placeholder="请输入设备大类"
              style="width: 50%"
            />
            <a
              href="https://open-icc.dahuatech.com/#/home?url=%3Fnav%3Dwiki%2Fcommon%2Fenum_list.html%23%E8%AE%BE%E5%A4%87%E5%A4%A7%E7%B1%BB&version=enterprisebase%2F5.0.16&blank=true"
              target="_blank"
              style=""
            >
              参考：设备大类<编码>
            </a>
          </el-form-item>
          <el-form-item label="设备小类" prop="deviceType">
            <el-input
              v-model="queryForm.deviceType"
              maxlength="20"
              clearable
              placeholder="请输入设备小类"
              style="width: 50%"
            />
            <a
              href="https://open-icc.dahuatech.com/#/home?url=%3Fnav%3Dwiki%2Fcommon%2Fenum_list.html%23%E8%AE%BE%E5%A4%87%E5%B0%8F%E7%B1%BB&version=enterprisebase%2F5.0.16&blank=true"
              target="_blank"
              style=""
            >
              参考：设备小类<值>
            </a>
          </el-form-item>
          <el-form-item label="单元类型" prop="unitTypeList">
            <el-input
              v-model="queryForm.unitTypeList"
              maxlength="20"
              clearable
              placeholder="请输入单元类型"
              style="width: 50%"
            />
            <a
              href="https://open-icc.dahuatech.com/#/home?url=%3Fnav%3Dwiki%2Fcommon%2Fenum_list.html%23%E5%8D%95%E5%85%83%E7%B1%BB%E5%9E%8B&version=enterprisebase%2F5.0.16&blank=true"
              target="_blank"
              style=""
            >
              参考：单元类型<类型key>
            </a>
          </el-form-item>
          <el-form-item label="在线状态" prop="isOnline">
            <el-switch
              v-model="queryForm.isOnline"
              active-color="#13ce66"
              inactive-color="#c0ccda"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              v-hasPermi="['monitor:parameter:edit']"
              type="primary"
              size="mini"
              @click="onSubmit('queryRef')"
            >
              保 存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  configConnect,
  configconnectSave,
  configParameter,
  configParameterSave,
} from "@/api/srceen/config";
export default {
  name: "monitor",
  data() {
    return {
      activeTab: "connect",
      connectForm: {},
      connectRules: {
        host: { required: true, message: "主机地址不能为空", trigger: "blur" },
        username: { required: true, message: "用户名不能为空", trigger: "blur" },
        password: { required: true, message: "密码不能为空", trigger: "blur" },
        clientId: { required: true, message: "客户端ID不能为空", trigger: "blur" },
        clientSecret: { required: true, message: "客户端密钥不能为空", trigger: "blur" },
        https: { required: true, message: "https端口不能为空", trigger: "blur" },
        http: { required: true, message: "http端口不能为空", trigger: "blur" },
        enableHttpTest: {
          required: true,
          message: "是否启用http测试不能为空",
          trigger: "change",
        },
      },
      queryForm: {},
      queryRules: {
        deviceCategory: [{ required: true, message: "请输入设备大类", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getConnectData();
  },
  methods: {
    // 切换tab
    handleClick() {
      if (this.activeTab === "connect") {
        this.getConnectData();
      } else {
        this.getQueryData();
      }
    },
    // 获取连接配置数据
    getConnectData() {
      this.isAuth("monitor:config:query", () => {
        configConnect().then((res) => {
          this.connectForm = res.data;
        });
      });
    },
    // 获取查询配置数据
    getQueryData() {
      this.isAuth("monitor:parameter:query", () => {
        configParameter().then((res) => {
          this.queryForm = res.data;
        });
      });
    },
    // 保存配置
    onSubmit(refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          if (this.activeTab === "connect") {
            configconnectSave(this.connectForm).then((res) => {
              this.$message.success("保存成功");
              this.getConnectData();
            });
          } else {
            configParameterSave(this.queryForm).then((res) => {
              this.$message.success("保存成功");
              this.getQueryData();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
a {
  color: #409eff;
}
</style>
